<template>
  <el-dialog
    ref="drawer"
    :title="isNotice?'发布通知':'上传文件'"
    :before-close="handleClose"
    :visible.sync="innerDialogNotice"
    fullscreen
  >
    <div class="demo-drawer__content">
      <el-form v-model="formData">
        <el-form-item :label="isNotice?'通知标题':'文件名'" label-width="80px">
          <el-input v-model="formData.title" autocomplete="off" />
        </el-form-item>
        <el-form-item label="下发单位" label-width="80px">
          <CompanySelector :code.sync="formData.to" />
        </el-form-item>
        <el-form-item v-if="isNotice" label="发送时间" prop="sendTime" label-width="80px">
          <el-date-picker
            v-model="formData.sendTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item :label="isNotice?'通知类型':'文件类型'" label-width="80px">
          <el-select v-model="formData.type" placeholder="请选择类型">
            <el-option
              v-for="item in isNotice?noticeTypes:documentTypes"
              :key="item.id"
              :label="item.alias"
              :value="item.name"
            />
          </el-select>
        </el-form-item>
        <Editor
          v-if="isNotice"
          ref="Editor"
          :value="formData.content"
          style="margin-left:1%;margin-right:1%;margin-bottom:1rem"
          :height="'36rem'"
        />
        <el-form-item :label="isNotice?'添加附件':'上传文件'">
          <el-upload
            ref="fileUploadForm"
            :data="fileData"
            :before-upload="beforeUpload"
            :http-request="noticeUpload"
            action="#"
            class="upload-demo"
            drag
            :file-list="list"
            :auto-upload="true"
          >
            <i class="el-icon-upload" />
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button-group style="margin-left:2rem;margin-top:1rem">
            <el-button style="margin-left:2rem;" @click="handleClose">取 消</el-button>
            <el-button
              type="primary"
              style="margin-left:1rem;"
              :loading="loading"
              @click="submitNotice(formData)"
            >{{ loading ? '提交中 ...' : '提 交' }}</el-button>
          </el-button-group>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>
<script>
import { send } from '@/api/zzxt/notice'
import { parseTime } from '@/utils'
import { upload } from '@/api/zzxt/upload'
export default {
  name: 'Publish',
  components: {
    Editor: () => import('@/components/MarkdownEditor/Editor'),
    CompanySelector: () => import('@/components/Company/CompanySelector')
  },
  props: {
    showDialogVisible: { type: Boolean, default: false },
    noticeForm: { type: Object, default: null },
    isNotice: { type: Boolean, default: true }
  },
  data: () => ({
    formData: {},
    to: null,
    list: [],
    fileList: [],
    fileData: null,
    loading: false,
    inner_DialogNotice: false
  }),
  computed: {
    noticeTypes() {
      return this.$store.state.notice.noticeTypes
    },
    documentTypes() {
      return this.$store.state.notice.documentTypes
    },
    innerDialogNotice: {
      get() {
        return this.inner_DialogNotice
      },
      set(val) {
        this.inner_DialogNotice = val
        this.$emit('update:showDialogVisible', val)
      }
    },
    filepath() {
      const now = this.parseTime(new Date(), '{yyyy}{mm}{dd}')
      return now
    }
  },
  watch: {
    showDialogVisible: {
      handler(val) {
        this.innerDialogNotice = val
        this.$emit('requireRefresh')
      }
    },
    noticeForm: {
      handler(val) {
        this.formData = val
      }
    }
  },
  methods: {
    parseTime,
    handleClose(done) {
      this.$confirm('确定要放弃编辑吗？')
        .then(_ => {
          this.loading = false
          this.innerDialogNotice = false
          clearTimeout(this.timer)
          done()
        })
        .catch(_ => {})
    },
    beforeUpload(file) {
      const obj = {
        file: file,
        data: {
          fileName: file.name,
          filePath: this.isNotice
            ? 'zzxt/notice/'
            : 'zzxt/document/' + this.filepath
        }
      }
      this.fileData = obj
    },
    noticeUpload() {
      upload(this.fileData).then(data => {
        const model = data.model
        const file = { id: model.id, name: model.name }
        this.fileList.push(JSON.stringify(file))
        this.$message.success(data.model.name + '上传成功')
      })
    },
    submitNotice(formData) {
      this.loading = true
      let content = '1'
      if (this.isNotice) content = this.$refs.Editor.get_content()
      formData.content = content
      formData.attachments = this.fileList
      send(formData)
        .then(data => {
          this.formData = {}
          this.$message.success('提交成功')
          setTimeout(() => {
            this.$emit('requireFresh')
          }, 1000)
          this.innerDialogNotice = false
        })
        .finally(item => {
          this.loading = false
        })
    }
  }
}
</script>
